<template>
  <el-container>
    <!-- 头部 -->
    <!--子传父 使用v-on绑定 使用$emit函数调用  -->
    <el-header><Header @getNavAction="getNavAction"></Header></el-header>
    <!-- 主体 -->
    <!--父传子 使用v-bind绑定 使用props方法接收  -->
    <el-main><Main :loadDom="loadDom"></Main></el-main>
    <!-- 底部 -->
    <el-footer><Footer></Footer></el-footer>
  </el-container>
</template>
<script>
import Header from "@/components/10-30示例项目框架开发/pc/Header";
import Main from "@/components/10-30示例项目框架开发/pc/Main";
import Footer from "@/components/10-30示例项目框架开发/pc/Footer";
export default {
  data() {
    return {
      loadDom: "Shouye",
    };
  },
  components: {
    Header,
    Main,
    Footer,
  },
  methods: {
    getNavAction(nav) {
      this.loadDom = nav;
      // console.log(nav);
    },
  },
};
</script>
<style lang="scss" scoped>
</style>